<template>
  <!--
   * @FileDescription: 书院详情
   * @author Sun Yan
   * @Date $
  -->
  <div class="academy-container">
    <!--    nav start -->
    <root-nav-title></root-nav-title>
    <!--    nav end -->

    <!--    body module start -->
    <com-main class="academy-body-container">

      <el-row :gutter="50">
        <el-col v-for="(item, index) in nodeChildrenConfig"
                :key="index"
                :xs="item.xs"
                :sm="item.sm"
                :md="item.md"
                :lg="item.lg"
                :xl="item.xl"
                :class="item.className">
          <transition name="fade">
            <component :is="item.componentName" v-if="transition"/>
          </transition>
        </el-col>
      </el-row>
    </com-main>
    <!--    body module end -->

  </div>
</template>
<script>
/**
 * @description: 方法描述
 * @param {参数类型} 参数名称
 * @param {参数类型} 参数名称
 * @return void
 */

import classfiy from '../components/academy-details/academy-personnel-classfiy'
import counts from '../components/academy-details/academy-counts'
import warning from '../components/academy-details/academy-warning'
import distributed from '../components/academy-details/academy-distributed'
import unreturned from '../components/academy-details/academy-unreturned'
import mainCount from '../components/academy-details/academy-main-count'
import mainFlow from '../components/academy-details/academy-main-flow'
import peakPeriod from '../components/academy-details/academy-peak-period'
import periodState from '../components/academy-details/academy-period-state'


export default {
  components: {
    classfiy,
    counts,
    warning,
    distributed,
    unreturned,
    peakPeriod,
    periodState,
    mainFlow,
    mainCount,
  },

  name: "academy-details",
  data() {

    var configPublic = {
      xs: 24,
      sm: 24,
      md: 12,
      lg: 8,
      xl: 6,
      className: '',
    };

    return {
      transition: false,
      // hidden-xs-only - 当视口在 xs 尺寸时隐藏
      // hidden-sm-only - 当视口在 sm 尺寸时隐藏
      // hidden-sm-and-down - 当视口在 sm 及以下尺寸时隐藏
      // hidden-sm-and-up - 当视口在 sm 及以上尺寸时隐藏
      // hidden-md-only - 当视口在 md 尺寸时隐藏
      // hidden-md-and-down - 当视口在 md 及以下尺寸时隐藏
      // hidden-md-and-up - 当视口在 md 及以上尺寸时隐藏
      // hidden-lg-only - 当视口在 lg 尺寸时隐藏
      // hidden-lg-and-down - 当视口在 lg 及以下尺寸时隐藏
      // hidden-lg-and-up - 当视口在 lg 及以上尺寸时隐藏
      // hidden-xl-only - 当视口在 xl 尺寸时隐藏
      nodeChildrenConfig: [
        {
          componentName: 'counts',
          xs: 24, // max-width: 767px
          sm: 24, // (min-width: 768px)
          md: 24, // (min-width: 992px)
          lg: {span: 16, push: 8},  // (min-width: 1200px)
          xl: {span: 12,  push: 6,}, // (min-width: 1920px)
          className: '',
        },

        {
          componentName: 'classfiy',
          xs: 24,
          sm: 24,
          md: 12,
          lg: {span: 8, pull: 16},
          xl: {span: 6,  pull: 12,},
          className: '',
        },

        {
          componentName: 'warning',
          ...configPublic,
          className: 'hidden-lg-only',
        },

        {
          componentName: 'distributed',
          ...configPublic,
        },
        {
          componentName: 'unreturned',
          ...configPublic,
        },

        {
          componentName: 'warning',
          ...configPublic,
          className: 'hidden-xl-only hidden-md-and-down',
        },

        {
          componentName: 'peakPeriod',
          ...configPublic,
        },
        {
          componentName: 'periodState',
          ...configPublic,
        },
        {
          componentName: 'mainFlow',
          ...configPublic,
        },
        {
          componentName: 'mainCount',
          ...configPublic,
        },
      ],

      classfiyOptions: {},//  api 图表数据
      warningOptions: {},//  api 图表数据
      mainCountOptions: {},//  api 图表数据
      mainFlowOptions: {},//  api 图表数据
      peakPeriodOptions: {},//  api 图表数据
      periodStateOptions: {},//  api 图表数据
      distributedOptions: {},//  api 图表数据
      unreturnedOptions: {},//  api 图表数据
    }
  },

  //数据映射 childrens vm
  provide() {
    return {
      _classfiyOptions: _ => this.classfiyOptions,
      _warningOptions: _ => this.warningOptions,
      _mainCountOptions: _ => this.mainCountOptions,
      _mainFlowOptions: _ => this.mainFlowOptions,
      _peakPeriodOptions: _ => this.peakPeriodOptions,
      _periodStateOptions: _ => this.periodStateOptions,
      _distributedOptions: _ => this.distributedOptions,
      _unreturnedOptions: _ => this.unreturnedOptions,
    }
  },

  created() {
    this._onInit();
  },

  methods: {
    async _onInit() {
      await this.$nextTick(_ => {
        window.setTimeout(_=> this.transition = true, 20)
      })
    }
  }
}
</script>


<style lang="scss">

.academy-container {
  .academy-body-container {
    > .el-row >.el-col {
      margin-bottom: 20px;
      min-height: 314px;
    }

    > .el-row >.el-col:nth-child(3),
    > .el-row >.el-col:nth-child(6),
    > .el-row >.el-col:nth-child(7),
    > .el-row >.el-col:nth-child(8),
    > .el-row >.el-col:nth-child(9) {
      height: 314px;
    }
  }
}


</style>